@textColor: #555555;
@initColor: #c0c0c0;

.item {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    .initNum {
        font-size: 24px;
        color: @initColor;
        user-select: none;
    }

    .stableNum {
        font-size: 30px;
        color: @textColor;
        font-weight: bolder;
        user-select: none;
    }

    .editLayout {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;

        .editNum {
            font-size: 30px;
            color: #1876ff;
            font-weight: bolder;
            user-select: none;
        }

        &:hover {
            background-color: #d5f6ff;
        }

        .markLayout {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .markItem {
                width: calc(100% / 3);
                height: calc(100% / 3);
                font-size: 18px;
                color: #d46060;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .errorLayout {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        background-color: #f7a7a7;

        .errorNum {
            font-size: 30px;
            color: #ed1c1c;
            font-weight: bolder;
            user-select: none;
        }
    }
}